<template>
  <div class="m-3">
    <VxeBasicTable ref="tableRef" v-bind="gridOptions">
      <template #action="{ row }">
        <TableAction
          :outside="true"
          :actions="[
            {
              label: '查看',
              onClick: handleView.bind(null, row),
            },
            {
              label: '暂停',
              onClick: handleSuspend.bind(null, row),
              ifShow: row.state === 'ACTIVE',
            },
            {
              label: '开始',
              onClick: handleStart.bind(null, row),
              ifShow: row.state === 'SUSPENDED',
            },
          ]"
        />
      </template>
    </VxeBasicTable>
    <BPMNTaskModal :width="1200" type="view" @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import type { VxeGridPropTypes } from '@mxpio/components/src/VxeTable';
  import type { VxeTableQueryParams } from '@mxpio/utils/src/criteria';

  import { ref, reactive } from 'vue';
  import { message } from 'ant-design-vue';

  import { TableAction } from '@mxpio/components/src/Table';
  import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '@mxpio/components/src/VxeTable';
  import { processList, suspend, start } from '@mxpio/api/src/flow/task';

  import { useModal } from '@mxpio/components/src/Modal';
  import { columns, searchFormSchema } from './process.data';
  import { getVxeTableQueryParams } from '@mxpio/utils/src/criteria';
  import BPMNTaskModal from '../task/BPMNTaskModal.vue';

  defineOptions({ name: 'ProcessList' });

  const [registerModal, { openModal }] = useModal();

  const tableRef = ref<VxeGridInstance>();

  const gridOptions = reactive<BasicTableProps>({
    id: 'ProcessManagement',
    columns: columns,
    toolbarConfig: {
      import: false,
    },
    formConfig: {
      enabled: true,
      items: searchFormSchema,
    },
    minHeight: 700,
    proxyConfig: {
      ajax: {
        query: async ({ page, form, sorts }: VxeGridPropTypes.ProxyAjaxQueryParams<any>) => {
          return loadData({ page, form, sorts });
        },
      },
    },
  });

  async function loadData({ page, form, sorts }: VxeTableQueryParams) {
    const params = getVxeTableQueryParams({ page, form, sorts });
    const res = await processList(params);
    return res;
  }

  function handleView(record: Recordable) {
    openModal(true, {
      isUpdate: false,
      record: {
        ...record,
        processInstanceId: record.id,
      },
    });
  }

  function handleSuccess() {
    tableRef.value?.commitProxy('query');
  }

  function handleSuspend(row: Recordable) {
    suspend(`${row.id}`).then((res) => {
      if (res.success) {
        message.success('操作成功');
        tableRef.value?.commitProxy('query');
      }
    });
  }

  function handleStart(row: Recordable) {
    start(`${row.id}`).then((res) => {
      if (res.success) {
        message.success('操作成功');
        tableRef.value?.commitProxy('query');
      }
    });
  }
</script>
